@extends("backend.layout.main")






@section("right_content")

<script type="text/javascript">
    $(function(){
        if($('.alertmsg').length){
            alert($('.alertmsg').html());
        }
    })
</script>

    <!--middle-->
    <div class="mainWrapBox">

                @if ($errors->has('messageOfStatus'))


            <div class="alertmsg hide">{{ $errors->first('messageOfStatus') }}</div>

            @endif
        <div class="mainBox">
       <div class="html">
 <div class="dashboard-title">2016-07-16，星期六 一天的工作从Xcube开始……<span style="float:right;margin-right:20px;"><a data-toggle="modal" data-target="#addcusPanel" onclick="getPanel()" href="javascript:void(0);">添加面板</a></span></div>
        <div class="dashboard-shortcut">
            <p><span class="title">快捷操作</span>
                <a href="" class="primarybtn btn-border-gray ml30">写日报</a>
                <a href="javascript:;" data-toggle="modal" id="costPanel" class="primarybtn btn-border-gray ml30">记录支出</a>
                    <a href="/backend/work/expense/showdownload" class="primarybtn btn-border-gray ml30" >审核支出</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建线索</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建机会</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建合同</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">添加客户</a>

            </p>
            <p><span class="title">快速链接</span>
                        <a href="javascript:void(0)" id="k-s-l-j-1" data-target="#modalPanel_1" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 费用支出明细</a>
                        <a href="javascript:void(0)" id="k-s-l-j-2" data-target="#modalPanel_2" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 合同开票明细</a>
                        <a href="javascript:void(0)" id="k-s-l-j-7" data-target="#modalPanel_7" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 合同回款明细</a>
                        <a href="javascript:void(0)" id="k-s-l-j-9" data-target="#modalPanel_9" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 开票与回款</a>
                        <a href="javascript:void(0)" id="k-s-l-j-19" data-target="#modalPanel_19" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 员工项目总表</a>
                        <a href="javascript:void(0)" id="k-s-l-j-20" data-target="#modalPanel_20" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 项目收支总表</a>
            </p>
        </div>
        <div id="dashboard-link-container" class="dashboard-link-container" style="display: none">

        </div>
            <div data="check" class="panel-modal-dialog">
        <div class="panel-modal-content">
            <div class="panel-modal-header ">
                <span class="panel-modal-title">费用支出明细 · 全公司 </span>
               
            </div>
            <div class="clear"></div>



 <!--            精确搜索时间 -->
            <form  method="get" action="/backend/work/expense/search">   
                <span class="xm- xm-time" style="margin-top: 5px; float: left;">
                    &nbsp;&nbsp;&nbsp;时间范围：
                    <input type="text" id="startDate" name="startDate"  class="inputStyle w90 times_in" placeholder="请选择时间" onClick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="width: 170px; text-align: center;">
                    ~
                    <input type="text" id="endDate" name="endDate"  class="inputStyle w90 times_in" placeholder="请选择时间" onClick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="width: 170px; text-align: center;">
                    <input type="submit" value="查询" class="searchDateBtn searchKey">
                </span>

          </form>
 <!--            精确搜索内容 -->
          <form id="queryForm_1" method="get" action="/backend/work/expense/search">                          
                        <div class="ml10" style="float: right; margin: 5px 15px">请输入查找关键字
                            <input type="text"  class="inputStyle w150"  val="" name="keyWords" id="keyWords">

                            <input type="submit" value="搜索" class="searchDateBtn searchKey">
                        </div>
         </form>



        <table cellpadding="0" cellspacing="0" class="table-font12 mt10">
    <thead class="table-font12-header">
            <tr >
                <th width="120px;">费用类型</th>
                <th width="100px;">创建人</th>
                <th width="100px;">申请时间</th>
                <th width="100px;">金额</th>
                <th>内容</th>
                <th width="200px">关联项目</th>
                <th width="70px">查看凭证</th>
                <th width="80px">状态</th>
                <th width="120px" style="text-align: center;">原因</th>
            </tr>
    </thead>
    <tbody class="table-font12-body">


         @foreach($expense as $v)

            <tr>

           
                 <td>{{ $v->expensetype }}</td>
                 <td>{{ $v->username }}</td>
                 <td>{{ date('Y/m/d',$v->time) }}</td>
                 <td>{{ $v->salary }}元</td>
                 <td>{{ $v->description }}</td>
                 <td>{{ $v->itemname }}</td>

                 <td><div class="piclookc" style="width:32px;height:32px;cursor: pointer;" data-id="{{ $v->fid }}"><img src="/backend/images/pic-pic.png"></div></td>


                 <td id="position">
                 @if( $v->status==2 )
                 <span>审核中</span>
                 @elseif( $v->status==0 )
                 <span>通过</span>
                 @elseif( $v->status==1 )
                 <span>未通过</span>
                 @endif
                 </td>

                         <td style="text-align: center;">{{ $v->reason }}</td>
                
            </tr>

         @endforeach
    </tbody>
</table>


 <!-- 财务 start    -->
<div class="modal" id="taskpay" style="display:none;width:800px">


<form id="taskpay_form" method="post" action="/backend/work/expense" enctype="multipart/form-data"  accept-
charset="utf-8" >
  {{ csrf_field() }}
   <div class="modal-dialog" style="width:800px">
    <div class="modal-content">
        <div class="modal-header">
          <span class="modal-title"><em>费用支出</em></span>
        </div>
        <div class="clear"></div>
        <div class="modal-body cost-modal" style="padding:15px;max-height:750px">

           <div  class="xiansuo_add_sc" style="margin:20px 0px;width: 100%;">
              <select  class="h30" style="border: 1px solid #e4e4e4;display: inline-block;width: 100%; font-size:15px" name="did[]">
                 <option value="0">——选择关联项目——</option>
                <option value="-1">无关联项目</option>
                @foreach($join_item_name as $k=>$v)
                 <option value="{{ $k }}" >{{ $v['joinItemName'] }}</option>
                @endforeach
                 
              </select>
           </div> 
           <div class="clear"></div>

             <div class="cost-area">
                            <p style="font-weight: bold;color:#808080">费用明细
                            <a class="f_r add_data" href="javascript:;"  style="cursor: pointer">+添加</a></p>
                            <table id="tmllist" class="tmllist" width="95%" style="margin-left:10px">
                                <thead class="xm_qx_header">
                                <tr>
                                    <th width="110px">费用类型</th>
                                    <th width="130px">金额</th>
                                    <th width="130px">时间</th>
                                    <th width="120px">描述</th>
                                    <th width="200px">上传凭证(可以多选)</th>
                                    <th width="30px"></th>
                                </tr>

                                </thead>
                                <tbody class="xm_qx_body" id="costDetailList">
                                    
                                </tbody>
                            </table>
        
            </div>
            <div>
            
             
            </div>
                 
           </div>
         <div class="modal-footer" style="display:block;">

            <input type="submit" value="保存凭证"  class="submit-close btn green" id="expense_uploadsave">

        </div>
        <div class="cl"></div>
    </div>
    </div>
  </form>
</div>



<!-- 财务 end -->





<!-- 未通过原因 start -->
<div class="modal" id="reason" style="display:none">

<h2 style="text-align: center;">请输入未通过原因</h2>

<form action="/backend/work/expense/passornot" method="POST">

{{ csrf_field() }}


    <textarea class="form-control textarea" name="rea" cols="77.5" rows="10"></textarea>

    <input type="submit" value="提交" class="btn green" style="float: right; margin:18px 10px 0px 0px">
    <input type="hidden" name="did" value="" >
    <input type="hidden" name="type" value="" >
    <input type="hidden" name="id" value="" >
    </p>      

</form>

</div>

<!-- 未通过原因 end -->


<!--图片显示div开始-->
          

    <div class="modal" id="piclook" style="display:none">
        <div class="modal-header ">
            <span class="modal-title"><div><em id="sortimg"></em>/<em id="numallimg">3</em></div> </span>
        </div>


         <div class="modal-body" style="padding:15px;height:600px;text-align:center;position: relative;">

        </div>
<div>
              <div class="left_move"><img src="/backend/images/left_move.png"></div>
           <div class="right_move"><img src="/backend/images/right_move.png"></div> 
</div>

      </div>

   

      
<!--图片显示div结束-->



<table class="table ">
    <tbody class="table-footer">
    <tr>
        <td style="text-align: left;">
            <span>
               
            </span>
        </td>
        <td style="text-align: right; vertical-align: middle;"></td>
    </tr>
    </tbody>
</table>
</div>
    </div>
</div>
</div>
        </div>
    </div>
 </div> 
 </div> 


 </body>
 <script type="text/javascript" src="/backend/js/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/laydate.js"></script>
<script type="text/javascript" src="/backend/js/jquery.hDialog.min.js"></script>



<script type="text/javascript">

$(document).on('click','.piclookc',function(){

   $('#piclook .modal-body').empty();
    var id = $(this).attr('data-id');

    $.ajax({
        type:'GET',
        url:"backend/work/expense/ajaxpic",
        data:{id:id},
        dataType:'json',
        success:function(e){
           // alert(e.length);

            for( var i=0; i<e.length;i++ ){


                $('#piclook .modal-body').append("<img src='/uploadsExpense/"+e[i]+"'  class='look-pic' />");
                $('.look-pic').removeClass('show');
                $('.look-pic').eq(0).addClass('show');
                $('#numallimg').html(e.length);
                $('#sortimg').html(1);

            }
        }
    });


 })


   $('.piclookc').hDialog({
          box:'#piclook',
          width:'900px',
          height:'600px',
          positions: 'top',
          modalHide: true,
          closeBg: '#fff',
  }); 



 $(document).on('click','.right_move',function(){
     $('.look-pic').each(function(index){
        if ($(this).hasClass('show')) {
            if(index+1==$('.look-pic').length){
                $('#sortimg').html(1);
            }else{
                $('#sortimg').html(index+2);
            }
         $('.look-pic').removeClass('show');
         if(index+1==$('.look-pic').length){
            $('.look-pic').eq(0).addClass('show');
         }else{
              $('.look-pic').eq(index+1).addClass('show');
         }
       
       return false;
        }
     })
  
 })
  $(document).on('click','.left_move',function(){
     $('.look-pic').each(function(index){
        if ($(this).hasClass('show')) {
            if(index==0){
                $('#sortimg').html($('.look-pic').length);
            }else{
                $('#sortimg').html(index);
            }
         $('.look-pic').removeClass('show');
         if(index==0){
            $('.look-pic').eq($('.look-pic').length-1).addClass('show');
         }else{
              $('.look-pic').eq(index-1).addClass('show');
         }
       
       return false;
        }
     })
  
 })






  $(function(){
   
     $('.notpass').hDialog({

                box:'#reason',
                width:'550px',
                height:'330px',
                positions: 'top',
                modalHide: false,
                closeBg: '#fff',


        }); 
    $(".notpass").on('click',function(){
        //event.stopPropagation();
        //var reason = $(".textarea").val();
        var id = $(this).attr('a_id');
        var type = $(this).attr('tid');
        var did = $(this).attr('did');

        $('input[name=id]').val(id);
        $('input[name=did]').val(did);
        $('input[name=type]').val(type);


        


    });
});


  $(function(){
    $(".status").on('click',function(){
     
        event.stopPropagation();
        var id = $(this).attr('a_id');
        var type = $(this).attr('tid');
        var did = $(this).attr('did');
        var reason = '';
        //var _Token="{{ csrf_token() }}";

            $.ajax({

                type:"GET",
                url:"/backend/work/expense/passornot",
                data:{id:id,type:type,did:did,reason:reason},
                dataType:'json',
                success:function(e){
                    location.reload();
                }

            });                 
    });
});


  //财务弹出
    function opentaskpay(obj) {
   
        $(obj).hDialog({
            box: '#taskpay',
            width:800,
            positions: 'center',
            modalHide: false,
            closeBg: '#fff',
            beforeShow:function(){

            }
        });
    }
    opentaskpay('#costPanel');


  $(document).on('click','.remove_window',function(){
    $(this).parent().parent().remove();
        for(var i=0;i<($('.expenseType').length);i++){

            $(".upload_file").eq(i).attr('name','file'+(i+1));
        }
})

    $(document).on('click','.add_data',function(){
 var count = $('.expenseType').length+1;

    var html='<tr class="expenseType"><td><select name="type[]" style="height:25px"><option>费用类型</option><option value="1">差旅</option><option value="2">招待</option><option value="3">分包</option><option value="4">打印</option></select></td>';

        html+='<td><input type="text" class="width120" name="salary[]" placeholder="元"></td>';

        html+='<td><input onClick="laydate()" type="text" name="time[]" readonly="readonly" placeholder="请选择时间" style="width:120px;cursor:pointer;" /></td>';
        html+='<td><input type="text" style="width:120px"  name="description[]" placeholder="描述"/></td>';


        html+='<td><input placeholder="可以多选图片" type="file" class="upload_file" style="width:200px;margin-left:10px" name="file'+count+'[]" multiple /></td>';



        html+='<td><a class="btn modal-cancel" onclick="removeCostDetail(this);">X</a></td></tr>';
    $('#costDetailList').append(html);   





})

    function editDetailData(obj) {
        var text=$(obj).children().eq(0).html();
        $(obj).children().eq(1).val(text).removeClass('hide');
        $(obj).children().eq(0).addClass('hide');
    }

    function saveDetailData(obj) {
        var text=$(obj).val();
        $(obj).addClass('hide');
        $(obj).prev().html(text).removeClass('hide');
    }

    function removeCostDetail(obj){
    $(obj).parent().parent().remove();
    }

    function request(paras){   
            var url = location.href;   
            var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");   
            var paraObj = {}   
            for (i=0; j=paraString[i]; i++){   
                paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);   
            }   
            var returnValue = paraObj[paras.toLowerCase()];   
            if(typeof(returnValue)=="undefined"){   
                return "";   
            }else{   
                return returnValue;   
            }   
    }



    var keyWords=request("keyWords");
    var startDate=request("startDate");
    var endDate=request("endDate");
    $('#startDate').val(decodeURI(startDate));
    $('#endDate').val(decodeURI(endDate));
    $('#keyWords').val(decodeURI(keyWords));

  //alert(keyWords);







 </script>
 @endsection
